[win-view='tool'] {
    width: 82px;
    right: 220px;
    top: 140px;
    border: 1px solid gray;
    min-height: 400px;
    background-color: white;

    &>h2 {
        font-size: 12px;
        padding-left: 30px;
        background-image: url('./image-editor.png');
        background-size: auto 80%;
        background-repeat: no-repeat;
        background-position: 3px center;
        border-bottom: 1px solid gray;
        line-height: 30px;
        height: 30px;
        user-select: none;
    }

    &>.list {
        &>li {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 5px;
            outline: 1px solid rgb(185, 182, 182);
            font-size: 0;
            vertical-align: top;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            cursor: pointer;

            &[active='yes'] {
                background-color: #e6e1e1;
            }

            &.move {
                background-image: url('./move.png');
            }

            &.eraser {
                background-image: url('./eraser.png');
            }

            &.eraser-bg {
                background-image: url('./eraser-bg.png');
            }

            &.drap {
                background-image: url('./drap.png');
            }

            &.painter {
                background-image: url('./painter.png');
            }

            &.resize {
                background-image: url('./resize.png');
            }

            &.text {
                background-image: url('./text.png');
            }

            &.geometry {
                background-image: url('./geometry.png');
            }

        }
    }

    &>.color {
        height: 40px;
        position: absolute;
        bottom: 5px;
        left: 0;

        &>span {
            position: absolute;
            display: inline-block;
            outline: 1px solid rgb(201, 201, 202);
            width: 30px;
            height: 30px;
            cursor: pointer;

            &[tag='forecolor'] {
                left: 15px;
                top: 0;
            }

            &[tag='backcolor'] {
                left: 35px;
                top: 10px;
            }
        }
    }
}